<template>
  <el-container style="  margin-left: 5px;">
    <el-row style="position: inherit;  margin-bottom: 5px;  margin-top: 10px;">
    </el-row>
    <el-container>
      <el-aside style=" margin-left: 10px;  min-width: 50%;  background: rgba(194,83,255,0);">
        <div style=" display: flex;   height: 100%;">
          <div
            style=" height: 100%;  width: 100%;  border-radius: 4px;  overflow-y: hidden;  overflow-x: hidden;  margin-left: -23px; display: inline-block;  ">
            <div>
              <div
                style="margin-top: 10px;  margin-bottom: 20px;  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.11), 0 0 6px rgba(0, 0, 0, 0.05);">
                <el-row>
                  <el-col :span="3.5">
                    <div style="display: block;margin-left: 12px;">
                      <span
                        style="display: block; margin-top: 22px;margin-left: 6px;  margin-bottom: 20px;  font-size: 20px;">员工：</span>
                    </div>
                  </el-col>
                  <el-col :span="5">
                    <el-input v-model="this.recordEmployeeNumber" :disabled="true"
                              style="width: 100px; height: 40px;margin-top: 22px; font-size: 20px;"
                    ></el-input>
                  </el-col>
                  <el-col :span="3.5">
                    <div style="display: block;margin-left: 20px;">
                      <span style="display: block; margin-top: 22px;  font-size: 20px;">手牌号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="this.handBrand " :disabled="true"
                              style="width: 100px; height: 40px;margin-top: 22px;  font-size: 20px;">
                    </el-input>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3.5">
                    <div style="display: block;">
                      <span style="display: block; margin-top: 22px;font-size: 20px;">房间号：</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-input v-model="this.seat " :disabled="true"
                              style="width: 100px; height: 40px;;margin-top: 22px;font-size: 20px;">
                    </el-input>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!--          展示商品表格-->
            <div style="height: 600px;  font-size: 25px;  margin-top: 60px;  margin-right: 13px;">
              <el-table :show-header="false" :data="projectList2" empty-text="玉泉宫" height="400" border
                        style="margin-top: 1px;  overflow-y: hidden;  overflow-x: hidden;  position: inherit;  font-size: 18px;width: 1150px">
                <el-table-column prop="entryName" label="商品名称" width="180" align="center">
                </el-table-column>
                <el-table-column prop="quantity" label="购买数量" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.quantity }}个</div>
                  </template>
                </el-table-column>
                <el-table-column sortable label="消费金额" align="center">
                  <template slot-scope="scope">
                    <div>{{ scope.row.totalAmount }}元</div>
                  </template>
                </el-table-column>
                <el-table-column align="center">
                  <template slot-scope="scope">
                    <el-button :type="buttonStyle(scope.row.id)" plain @click="xz1(scope.row.id)">选择</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-button
              style="margin-top: 100px;  margin-left:11px;  font-size: 25px;  width: 200px;  height: 100px;  border: 3px solid #87CEFA;"
              type="primary" plain @click="hz()">换钟
            </el-button>
            <el-button
              style="margin-top: 100px;  margin-left:11px;  font-size: 25px;  width: 200px;  height: 100px;  border: 3px solid #87CEFA;"
              type="primary" plain   @click.prevent.stop.native="back()">返回主页
            </el-button>
          </div>
          <!--分类条-->
          <div style="display: inline-block;   height: 400px;  width: 24%;">
            <div>
              <div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
                <el-card
                  style="margin-top: 30px;  margin-left: 5px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #ea0d0d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListam()">
                  <span style="   line-height:80px;  font-size: 22px;">按摩</span>
                </el-card>
                <el-card
                  style="margin-left: 5px;  margin-top: 7px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #eab30d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListaj()">
                  <span style=" line-height: 80px;  font-size: 22px;">按脚</span>
                </el-card>
                <el-card
                  style="margin-left: 5px;  margin-top: 7px;  text-align: center;  width: 170px;  height: 120px;  border: 4px solid #74ea0d;  border-top:none;border-bottom:none;"
                  @click.prevent.stop.native="getListxx()">
                  <span style=" line-height: 80px;  font-size: 22px;">小项</span>
                </el-card>
              </div>

            </div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main style="   height: 100%;  margin-right: 10px;  margin-top: 15px;  width: 100%;">
          <div style="   height: 760px;">
            <el-row style="  text-align: center;">
              <el-col v-for="(item,index) in projectList" :span="8">
                <el-button plain
                           style="height: 123px;width: 212px;margin-top: 3px;padding: 0;font-size: 22px;  border: 3px solid #87CEFA;"
                           type="primary" @click="xz(item.id)">
                  <div>{{ item.entryName }}</div>
                  <div>{{ item.unitPrice }}元</div>
                </el-button>
              </el-col>
            </el-row>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import {
  listDetails,
  listpjDetails,
  huanzhong
} from "@/api/module/yzx/details";
import {listProject} from "@/api/module/yzx/project";

export default {
  name: "huanzhong",
  data() {
    return {
      currentClickedRowId: null,
      // isClicked: false,
      //记录单价
      pid: null,
      did: null,
      price: null,
      //记录服务员号
      recordEmployeeNumber: null,
      //记录手牌号
      handBrand: null,
      //记录房间
      seat: "",
      entryName: null,
      note6: null,
      info: {},
      // 遮罩层
      loading1: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      // 项目信息表格数据
      projectList: [],
      projectList1: [],
      projectList2: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        entryName: null,
        projectCategory: null,
        firstLevelClassification: null,
        secondaryClassification: null,
        tertiaryClassification: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        clockUpTime: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},
      form1: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    this.getList1();
    this.getList();
    this.getList2();
  },


  methods: {

    buttonStyle(id) {
      return id === this.currentClickedRowId ? 'info' : 'warning';
    },
    back() {
      console.log("as")
      this.$router.push({path: "/jishi/index"});
    },
    xz(id) {
      this.pid = id;
      console.log(id);
    },
    xz1(id) {
      console.log(id);
      this.did = id;
      if (id === this.currentClickedRowId) {
        // 如果点击的是当前已经点击的行，则取消点击状态
        this.currentClickedRowId = null;
      } else {
        // 如果点击的是新行，则更新点击行，并清除之前点击行的状态
        this.currentClickedRowId = id;
      }
      // this.isClicked = true;
    },
    /** 查询消费详细列表 */
    getList() {
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "04";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
      });
    },
    getList1() {
      listpjDetails().then(response => {
        this.projectList2 = response.rows;
      });
    },
    getList2() {
      this.queryParams2.nextClockStatus = "1";
      listDetails(this.queryParams2).then(response => {
        this.detailsList = response.rows;
        this.detailsList.forEach(item => {
          this.recordEmployeeNumber = item.recordEmployeeNumber;
          this.handBrand = item.handBrand;
          this.seat = item.seat;
          this.price = item.unitPrice;
          this.entryName = item.entryName;
          this.note6 = item.note6;
        })
      });
    },
    getListam() {
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "04";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
      });
    },
    getListaj() {
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "05";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
      });
    },
    getListxx() {
      this.queryParams1.projectCategory = "02";
      this.queryParams1.firstLevelClassification = "07";
      listProject(this.queryParams1).then(response => {
        this.projectList = response.rows;
      });
    },
    hz() {
      const leftid = this.did;
      const rightid = this.pid;
      console.log(leftid);
      console.log(rightid);
      huanzhong(leftid, rightid).then(response => {
        this.$modal.msgSuccess("换钟成功");
      });
      this.$router.push({path: "/jishi/index"});
    },
  }
};
</script>

